<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品列表页</title>
    <link rel="stylesheet" href="../css/normalize.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/product-list.css">
</head>

<body>

    <!-- 头部 -->
    <div class="head container clearfix">
        <div class="fl head-logo">
            <a href="#"><img src="../imgs/logo.png" alt="加载失败"></a>
        </div>
        <div class="fl head-aff">
            <p>茶叶协会官网</p>
            <p>www.cha**ui.top</p>
        </div>
        <div class="fl head-nav">
            <ul class="clearfix">
                <li><a href="home.html" target="_blank">首页</a></li>
                <li><a href="about.html" target="_blank">关于我们</a>
                    <p class="nav-menu">
                        <a href="about.html" target="_blank">公司简介</a>
                        <a href="honor.html" target="_blank">荣誉资质</a>
                        <a href="culture.html" target="_blank">企业文化</a>
                        <a href="contact.html" target="_blank">联系我们</a>
                    </p>
                </li>


                <li class="active"><a href="#">产品中心</a>
                    <p class="nav-menu">
                        <a href="#">乌龙茶系列</a>
                        <a href="#">花茶系列</a>
                        <a href="#">普洱系列</a>
                        <a href="#">茶食品系列</a>
                        <a href="#">茶月饼系列</a>
                        <a href="#">茶具系列</a>
                    </p>
                </li>

                <li><a href="news-list.html" target="_blank">新闻动态</a>
                    <p class="nav-menu">
                        <a href="#">公司新闻</a>
                        <a href="#">行业动态</a>
                        <a href="news-detail.html">媒体报道</a>
                        <a href="#">茶叶知识</a>
                    </p>
                </li>
                <li><a href="#">品牌简介</a></li>
                <li><a href="successful.html" target="_blank">合作交流</a>
                    <p class="nav-menu">
                        <a href="cooperation.html">合作介绍</a>
                        <a href="dispositional.html">意向提交</a>
                        <a href="successful.html">成功案例</a>
                        <a href="information.html">信息发布</a>
                    </p>
                </li>
            </ul>
        </div>
    </div>

    <!-- banner -->
    <div class="banner">
        <div class="banner-content container">
            <div class="banner-text">
                <p class="banner-btext">一杯牵起天下情，一茗惊人睿香</p>
                <p class="banner-stext">A CUP TO HOLD THE WORLD, A CUP OF TEA AMAZING RUIXIANG GARDEN</p>
            </div>
        </div>

        <div class="banner-h">
            <div class="banner-list container">
                <ul class="clearfix">
                    <li class="active"><a href="#">乌龙茶系列</a></li>
                    <li><a href="#">花茶系列</a></li>
                    <li><a href="#">普洱系列</a></li>
                    <li><a href="#">茶食品系列</a></li>
                    <li><a href="#">茶月饼系列</a></li>
                    <li><a href="#">茶具系列</a></li>
                </ul>
            </div>
        </div>
    </div>
    
    <!-- 主体 -->
    <div class="list-main">
        <div class="container">
            <div class="list-cont">
                <ul class="clearfix">
                    <li>
                        <a href="product-detail.html" target="_blank"><img src="../imgs/76.jpg" alt="加载失败"
                                class="pro-list-img"></a>
                        <p class="cont-atext"><a href="product-detail.html" target="_blank">某某熟普洱茶饼黑茶饼特级茶叶</a></p>
                        <p class="pro-btext"><a href="product-detail.html"
                                target="_blank">普洱熟茶是用某某县特有的青毛茶为材料，经过发酵等各种工艺加工</a></p>
                    </li>
                    <li>
                        <a href="#"><img src="../imgs/79.jpg" alt="加载失败" class="pro-list-img"></a>
                        <p class="cont-atext"><a href="#">某某生普洱茶饼特级古树黑茶</a></p>
                        <p class="pro-btext"><a href="#">普洱生茶是用某某县特有的青毛茶为材料，经过各种工艺加工制作而</a></p>
                    </li>
                    <li>
                        <a href="#"><img src="../imgs/77.jpg" alt="加载失败" class="pro-list-img"></a>
                        <p class="cont-atext"><a href="#">某某生普洱茶饼月光仙子白茶饼</a></p>
                        <p class="pro-btext"><a href="#">此款月光仙子只采月光白单片芽头百里挑一。这种茶外形肥壮，白毫</a></p>
                    </li>
                    <li>
                        <a href="#"><img src="../imgs/78.jpg" alt="加载失败" class="pro-list-img"></a>
                        <p class="cont-atext"><a href="#">某某熟普洱茶饼黑茶特级茶叶</a></p>
                        <p class="pro-btext"><a href="#">普洱熟茶是用某某县特有的青毛茶为材料，经过发酵等各种工艺加工</a></p>
                    </li>
                    <li>
                        <img src="../imgs/80.jpg" alt="加载失败" class="pro-list-img">
                        <p class="cont-atext">香螺茉莉</p>
                        <p class="pro-btext">本品系采摘春季肥壮的绿茶嫩芽，采用精细的加工方法制成圆球状，</p>
                    </li>
                    <li>
                        <a href="#"><img src="../imgs/81.jpg" alt="加载失败" class="pro-list-img"></a>
                        <p class="cont-atext"><a href="#">珍珠茉莉</a></p>
                        <p class="pro-btext"><a href="#">珍珍珠茉莉花茶系采摘新鲜嫩芽，遵循古法经精心揉制而成圆球状，</a></p>
                    </li>
                    <li>
                        <a href="#"><img src="../imgs/82.jpg" alt="加载失败" class="pro-list-img"></a>
                        <p class="cont-atext"><a href="#">金玉满堂</a></p>
                        <p class="pro-btext"><a href="#">金玉满堂－本品选用产于中国云南澜沧江畔海拔1000公尺以上的</a></p>
                    </li>
                    <li>
                        <a href="#"><img src="../imgs/83.jpg" alt="加载失败" class="pro-list-img"></a>
                        <p class="cont-atext"><a href="#">润津</a></p>
                        <p class="pro-btext"><a href="#">润津铁观音是面向闽南地区的特色商品</a></p>
                    </li>
                </ul>
                <p class="jl-btn">共53条记录
                    <button class="active">1</button>
                    <button>2</button>
                    <button>3</button>
                    <button>4</button>
                    <button>5</button>
                    <button>6</button>
                    <span>...</span>
                    <button>7</button>
                    <button>下一页&gt;</button>
                    <button>末页</button>
                </p>
            </div>
        </div>
    </div>

    <!-- 尾部 -->
    <div class="foot">
        <div class="foot-nav">
            <div class="container">
                <ul class="clearfix">
                    <li><a href="home.html" target="_blank">网站首页</a></li>
                    <li><a href="about.html" target="_blank">关于我们</a></li>
                    <li><a href="product-list.html" target="_blank">产品中心</a></li>
                    <li><a href="news-list.html" target="_blank">新闻动态</a></li>
                    <li><a href="#">品牌简介</a></li>
                    <li><a href="cooperation.html" target="_blank">合作交流</a></li>
                </ul>
            </div>
        </div>

        <div class="foot-relation">
            <div class="relation-cont container clearfix">
                <div class="relation-us">
                    <p class="us-hl">联系我们</p>
                    <p>地址：某某市友谊路258号(百灵·尚品一号B-2-8-2)</p>
                    <p>邮编：5**0000</p>
                    <p>电话：400-***-000</p>
                    <p>联系人：精品茶叶官方宣传网站</p>
                </div>
                <div class="relation-list">
                    <ul class="clearfix">
                        <li>
                            <h3>关于我们</h3>
                            <p><a href="about.html" target="_blank">关于我们</a></p>
                            <p><a href="contact.html" target="_blank">联系我们</a></p>
                            <p><a href="culture.html" target="_blank">企业文化</a></p>
                            <p><a href="honor.html" target="_blank">荣誉资质</a></p>
                        </li>
                        <li>
                            <h3>合作交流</h3>
                            <p><a href="successful.html" target="_blank">成功案例</a></p>
                            <p><a href="cooperation.html" target="_blank">合作介绍</a></p>
                            <p><a href="information.html" target="_blank">信息发布</a></p>
                            <p><a href="dispositional.html" target="_blank">意向提交</a></p>
                        </li>
                        <li>
                            <h3>产品中心</h3>
                            <p><a href="#">乌龙茶系列</a></p>
                            <p><a href="#">花茶系列</a></p>
                            <p><a href="#">普洱系列</a></p>
                            <p><a href="#">茶食品系列</a></p>
                        </li>
                    </ul>
                </div>
                <div class="relation-erweima">
                    <img src="../imgs/erweima.png" alt="加载失败">
                    <p>微信公众号</p>
                </div>
            </div>
            <p class="foot-last">
                <span>COPYRIGHT WWW.GZ**.ORG</span>
                <span>版权所有：精品茶叶官方宣传网站</span>
                <span>ICP备案编号：黔ICP备140***33号-1</span>
            </p>
        </div>
    </div>
</body>

</html>